<template>
    <div>
        <Table ref="table" :columns="columns" :data="list" @on-select="handleSelect"
            @on-select-cancel="handleSelectCancel" @on-select-all="handleSelectAll"
            @on-select-all-cancel="handleClearSelect" :loading="loading" context-menu show-context-menu
            @on-contextmenu="handleContextMenu">
            <template slot="contextMenu">
                <DropdownItem @click.native="handleContextMenuEdit">切换</DropdownItem>
                <DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">移除</DropdownItem>
            </template>
            <template slot="basic" slot-scope="{row}">
                <a>{{row.name}}<span class="ivu-ml-8">{{row.age}}</span><span v-if="row.gender === true"
                        class="ivu-ml-8">
                        男</span><span v-if="row.gender === false" class="ivu-ml-8">
                        女</span></a>
            </template>
            <template slot="label" slot-scope="{row}">
                <tag v-for="(item,index) in row.label" :key="index">{{item}}</tag>
            </template>
            <template slot="state" slot-scope="{row}">
                <Tag v-if="row.status_name === '无效'" color="red">{{
                        row.status_name
                    }}</Tag>
                    <Tag
                        v-else-if="row.status_name === '跟进中'"
                        color="volcano"
                    >{{ row.status_name }}</Tag
                    >
                    <Tag
                        v-else-if="row.status_name === '预约'"
                        color="cyan"
                    >{{ row.status_name }}</Tag
                    >
                    <Tag
                        v-else-if="row.status_name === '到诊'"
                        color="green"
                    >{{ row.status_name }}</Tag
                    >
                    <Tag
                        v-else-if="row.status_name === '老患者到诊'"
                        color="magenta"
                    >{{ row.status_name }}</Tag
                    >
                    <Tag v-else-if="row.status_name==='有意向'" color="blue">{{
                        row.status_name
                    }}</Tag>
                    <Tag v-else-if="row.status_name==='未开口'" color="purple">{{
                        row.status_name
                    }}</Tag>
                    <Tag v-else-if="row.status_name" color="orange">{{
                        row.status_name
                    }}</Tag>
            </template>
            <template slot="city" slot-scope="{row}">
                {{row.city}}
            </template>
            <template slot="action" slot-scope="{row}">
                <a>{{row.action[0]}}</a>
                <Divider type="vertical"></Divider><a>{{row.action[1]}}</a>
            </template>
        </Table>
        <div class="ivu-mt ivu-text-center">
            <Page :total="total" :current.sync="current" show-total show-sizer show-elevator :page-size="limit"
                @on-change="handleChangePage" @on-page-size-change="handleChangePageSize" />
        </div>
        <Modal @on-ok="ok" v-model="cutView" width="360" title="切换患者视图" :mask-closable='false'>
            <Select>
                <Option v-for="item in viewList" :key="item.vaule" :value="item.value">
                    {{item.label}}
                </Option>
            </Select>
        </Modal>
    </div>
</template>
<script>
    // import { getViewList } from '@api/account.js'
    export default {
        components: {},
        data() {
            return {
                loading: false,
                tableSize: 'default',
                current: 1,
                limit: 10,
                total: 0,
                selectedData: [],
                cutView: false,
                viewList: [
                    {
                        value: '抖音质量患者',
                        label: '抖音质量患者'
                    },
                    {
                        value: '重要患者',
                        label: '重要患者'
                    },
                    {
                        value: '有意向',
                        label: '有意向'
                    }
                ],
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '基本信息',
                        show: true,
                        slot: 'basic',
                        minWidth: 135,
                        fixed: 'left'
                    },
                    // {
                    //     title: '微信号',
                    //     key: 'wx',
                    //     minWidth: 108
                    // },
                    {
                        title: '患者状态',
                        show: true,
                        slot: 'state',
                        minWidth: 100
                    },
                    {
                        title: '所在计划',
                        show: true,
                        slot: 'view',
                        sortable: true,
                        minWidth: 118
                    },
                    {
                        title: '回访次数',
                        key: 'numberVisits',
                        sortable: true,
                        show: true,
                        minWidth: 118
                    },
                    {
                        title: '上次回访时间',
                        key: 'visitTime',
                        show: true,
                        minWidth: 158
                    },
                    {
                        title: '上次回访人',
                        key: 'visitPerson',
                        show: true,
                        minWidth: 118
                    },
                    {
                        title: '待回访时间',
                        key: 'preArrival',
                        sortable: true,
                        show: true,
                        minWidth: 125
                    },
                    {
                        title: '微信标签',
                        key: 'label',
                        slot: 'label',
                        show: true,
                        minWidth: 138
                    },
                    {
                        title: '城市',
                        slot: 'city',
                        show: true,
                        minWidth: 88
                    },
                    {
                        title: '病种',
                        key: 'disease',
                        show: true,
                        minWidth: 200
                    },
                    {
                        title: '来源',
                        minWidth: 98,
                        show: true,
                        key: 'channel'
                    },
                    {
                        title: '归属人',
                        key: 'belonger',
                        show: true,
                        minWidth: 80
                    },
                    {
                        title: '创建时间',
                        key: 'foundTime',
                        show: true,
                        minWidth: 135,
                        sortable: true
                    },
                    {
                        title: '备注',
                        minWidth: 150,
                        tooltip: true,
                        show: true,
                        key: 'remarks'
                    },
                    {
                        title: '操作',
                        width: 118,
                        show: true,
                        slot: 'action',
                        fixed: 'right'
                    }
                ],
                list: []
            }
        },
        methods: {
            handleTabsAdd() {
                // console.log(666)
            },
            getData() {
                // this.loading = true
                // getViewList().then(async(res) => {
                //     console.log(res)
                //     this.list = res.list
                //     this.total = res.total
                //     console.log(this.total)
                // }).finally(() => {
                //     this.loading = false
                // })
            },
            // 切换页码
            handleChangePage(page) {
                this.current = page
                this.getData()
            },
            // 切换每页条数
            handleChangePageSize(size) {
                this.current = 1
                this.limit = size
                this.getData()
            },
            // 右键切换患者
            handleContextMenu(row) {
                const index = this.list.findIndex(item => item.name === row.name)
                this.contextLine = index + 1
            },
            handleContextMenuEdit() {
                this.cutView = true
            },
            ok() {
                this.$Message.success('切换成功！')
            },
            handleContextMenuDelete() {
                this.$Modal.confirm({
                    title: '移除提示',
                    content: '<p>是否将患者从本视图移除</p>',
                    onOk: () => {
                        this.$Message.success('移除成功')
                    }
                })
            },
            // 选中一项，将数据添加至已选项中
            handleSelect(selection, row) {
                this.selectedData.push(row)
                this.getSelectData()
            },
            // 取消选中一项，将取消的数据从已选 项中删除
            handleSelectCancel(selection, row) {
                const index = this.selectedData.findIndex(item => item.id === row.id)
                this.selectedData.splice(index, 1)
                this.getSelectData()
            },
            handleSelectAll(selection) {
                selection.forEach(item => {
                    if (this.selectedData.findIndex(i => i.id === item.id) < 0) {
                        this.selectedData.push(item)
                    }
                })
                this.getSelectData()
            },
            handleClearSelect() {
                this.selectedData = []
                this.getSelectData()
            },
            getSelectData() {
                this.$emit('on-receive', this.selectedData)
            }

        },
        mounted() {
            this.getData()
        }
    }
</script>
<style lang='less' scoped>
</style>